<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
    }

    .box {
      display: flex;
      flex-wrap: wrap;
      width: 600px;
      background-color: red;
      margin: 100px auto;
    }

    .item {
      flex: 0 0 33.33%;
      min-width: 0;
      height: 100px;
      background-color: blue;
      padding: 4px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>




  <details>
    <summary>点击展开/折叠</summary>
    <div>
      <p>这里是折叠的内容，可以包含任何HTML元素。</p>
      <p>默认情况下是折叠的，点击summary可以展开。</p>
    </div>
    </detail>




    <script>
      //多态: 父类的方法和属性可以被子类重写, 表现出不同的形态
      class Animal {
        eat() {
          console.log('Animal-吃东西', this);
          this.speek();
        }
      }

      class Dog extends Animal {
        speek() {
          console.log('汪汪');
        }
      }

      // const dog = new Dog('花花')
      // console.log('===dog===>', dog)
      // dog.eat()

      class BaseLogin {
        login(username, password) {
          console.log('BaseLogin-login-start');
          this.getUerInfo(username, password);
          console.log('BaseLogin-login-end');

        }
      }
    class DDLogin extends BaseLogin {
      constructor(parameters) {
        super(parameters);
      }
      getUerInfo() {
        console.log('DDLogin-getUerInfo');
      }
    }
    class QQLogin extends BaseLogin {
      constructor(parameters) {
        super(parameters);

       }
      getUerInfo() {
        console.log('QQLogin-getUerInfo');
      }
    }
    class WXLogin extends BaseLogin {
      constructor(parameters) {
        super(parameters);

      }
      getUerInfo() {
        console.log('WXLogin-getUerInfo');
      }
    }
    const LOGIN_MAP = {
      'dd': DDLogin,
      'qq': QQLogin,
      'wx': WXLogin
    }
    function loginFactory(type) {
      return new LOGIN_MAP[type]()
    }
    const login = loginFactory('wx')
    login.login('admin', '123456')



    async function fn1() {
      console.log('fn1');
      // return Promise.reject(0);
      throw new Error("错误");

    }

    async function fn2() {
      try {
        const ret = await fn1();
        console.log('===ret===>', ret);
      } catch (error) {
        console.log('===error===>', error);
      }
    }
    // fn2()
  </script>
</body>

</html>